import React from 'react';
const Flow = () => {
    let navigate = React.$router.useNavigate();
    let [searchParams] = React.$router.useSearchParams();
    const [leaseid, setleaseid] = React.useState(searchParams.get('leaseid') ?? 0)
    const [Business, setBusiness] = React.useState(React.$cookie.load('User') ?? {})
    const [info, setInfo] = React.useState({
        product: {},
        express: []
    })

    React.useEffect(() => {
        getLeaseFlow()
    }, [])

    async function getLeaseFlow() {
        let result = await React.$api.LeaseFlow({
            leaseid: leaseid,
            busid: Business.id,
        })
        if (result && result.code == 1) {
            setInfo(result.data)
        }
    }
    function dateTime(time) {
        const date = new Date(time);
        const year = date.getFullYear().toString().padStart(4, '0');
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hour = date.getHours().toString().padStart(2, '0');
        const minute = date.getMinutes().toString().padStart(2, '0');
        const second = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;

    }
    return (
        <>
            <React.$vant.NavBar
                title="订单物流"
                leftText=""
                onClickLeft={() => navigate('/business/order')}
            />

            <div className="zy_module_content" style={{ paddingTop: 0 }}>
                <div className="swiper-container vip_user_order">
                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <a href="my_dd_xq.html">
                                            <i><img src={info.product.thumbs_text} /></i>
                                            <div style={{
                                                float: 'right', marginLeft: '2.5%',
                                                width: '70%', fontSize: '.22rem', color: '#999', lineHeight: '25px'
                                            }}>
                                                <div>{info.product.name}</div>
                                                <div>
                                                    <em>押金：</em>
                                                    <em>{info.rent}</em>
                                                </div>
                                                <div>
                                                    <em>总价：</em>
                                                    <em>{info.price}</em>
                                                </div>
                                                <div>
                                                    <em>结束时间：</em>
                                                    <em>{info.endtime_text}</em>
                                                </div>
                                                <div>
                                                    <em>订单状态：</em>
                                                    <em>{info.status_text}</em>
                                                </div>
                                            </div>
                                        </a>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="lianxi_ge">
                <a href={`tel:` + Business.telephone}>联系客服</a>
            </div>
            <div className="rem2"></div>
            <React.$vant.Steps direction="vertical" active={0}>
                {info.express.map((item,index) => {
                    return (
                        <React.$vant.Steps.Item key={index}>
                            <h3 style={{ lineHeight: 1.5 }}>{item.desc}</h3>
                            <p >{dateTime(item.time)}</p>
                        </React.$vant.Steps.Item>
                    )
                })}

            </React.$vant.Steps>
        </>
    )
}

export default Flow;